<template>
  <right_menu></right_menu>
  <HHead></HHead>
  <shopping_maid/>
  <shOpping></shOpping>
</template>

<script >
import shopping_maid from './components/shopping_maid.vue';
import right_menu from './components/right_menu.vue';
import shOpping from './components/shOpping'
import HHead from '../../components/HHead'




export default {
  name: 'shop_maid',
  components: {
    shopping_maid,
    right_menu,
    shOpping,
    HHead
  },
  data() {
    return {
    }
  },
  watch:{
    // $route(){
    //   this.$router().go()
    // }
  },
};
//shopping_maid
import $ from "jquery";
import axios from "axios";
// import func from 'vue-editor-bridge';
// var b1 = document.getElementsByClassName('.b1')
let shopping_count = 0;
$(function () {
  $(".shopping_switch").on("click", function () {
    shopping_count++;
    if (shopping_count % 2 !== 0) {
      $('.shopping_option_text').text("商品").css({
        transform: "translateX(5px)",
        transition: "1s",
      });
      $('.shopping_input_text').attr("placeholder", " 请输入您想查找的店铺");
      $('.shopping_switch').css({
        "background-color": "#fff",
        transform: "translateX(11px)",
        transition: "1s",
      });
      $(".shopping_find_option").css({
        "background-color": " rgba(145, 233, 14, 0.443)",
        "box-shadow": "0px 0px 6px rgba(145, 233, 14, 0.443)",
      });
    } else if (shopping_count % 2 === 0 || shopping_count === 0) {
      $('.shopping_option_text').text("店铺").css({
        transform: "translateX(83px)",
        transition: "1s",
      });
      $(".shopping_input_text").attr("placeholder", " 请输入您想查找的商品");
      $(".shopping_switch").css({
        transform: "translateX(-60px)",
        transition: "1s",
        "background-color": "#fff",
      });
      $(".shopping_find_option").css({
        "background-color": "rgba(255, 0, 0, 0.567)",
        "box-shadow": "0px 0px 6px #666666b1",
      });
    }
  });
  $(".find").on("mouseout", function () {
    $(".find").css({
      transition: "1s",
    });
  });
  const overFindList = document.getElementsByClassName('overFindList')
  // const liElements = ulElement.querySelectorAll('.findListLi'); // 获取l元素
  const ulIsNull = document.getElementsByClassName('ulIsNull')
  const ulElement = document.querySelector('.findListUl'); // 获取ul元素

  // document.addEventListener('DOMContentLoaded', function() {
    //输入框为全局变量
    const find_input = document.getElementsByClassName('shopping_input_text')[0];

    //是否中文输入
    let IsChinese = false;
    //获取输入法的值
  if (find_input) {
    find_input.addEventListener('input', function () {
      if (IsChinese && find_input.value.replace(/\s/g, '').length === 0) {
        return;
      }
      findGoods(find_input.value.replace(/\s/g, ''))
    })

    //中文开始输入
    find_input.addEventListener('compositionstart', function () {
      IsChinese = true;
      console.log('中文输入')
    })
    //中文输入结束
    find_input.addEventListener('compositionend', function () {
      IsChinese = false;
      console.log('中文输入结束')
      findGoods(find_input.value)
    })
    $(overFindList).on('click', clickOverFindList);
  }
    //点击关闭按钮
    function clickOverFindList() {
      $(ulElement).css({
        display: 'none'
      })
      $(ulIsNull).css({
        display: 'none'
      })
      $(overFindList).css({
        display: 'none'
      })
      find_input.value = ''
    }

    //点击li标签跳转函数
    function handleLiClick(event) {
      find_input.value = ''
      const liElement = event.target; // 获取被点击的 <li> 元素
      const goodsId = liElement.dataset.goodsId; // 获取 <li> 元素的 data-goods-id 属性值
      if (goodsId) {
        const url = '/shopDetailed/' + goodsId; // 根据 goodsId 构建 URL
        window.location.href = url; // 跳转到指定的 URL
      }
    }

    //查找商品的函数
    function findGoods(value) {
      if (shopping_count % 2 === 0) {
        console.log(value)
        try {
          const findGoods = axios.get('https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch', {
                params: {
                  query: value
                }
              }
          )
          findGoods.then(function (response) {
            var data = response.data;
            var message = data.message;
            console.log(message);
            // 遍历message数组并创建或更新对应的li元素
            if (message.length > 0) {
              $(overFindList).css({
                display: 'block'
              })
              $(ulElement).css({
                display: 'block'
              })
              $(ulIsNull).css({
                display: 'none'
              })
              for (let i = 0; i < message.length; i++) {
                let liElement = ulElement.querySelector('.findListLi:nth-child(' + (i + 1) + ')');
                if (!liElement) {
                  liElement = document.createElement('li');
                  liElement.classList.add('findListLi');
                  ulElement.appendChild(liElement);
                }
                liElement.textContent = message[i].goods_name;
                liElement.dataset.goodsId = message[i].goods_id;
                liElement.addEventListener('click', handleLiClick); // 添加点击事件监听器
                $(ulElement).css({
                  height: "400px",
                  overflow: 'auto'
                })
              }
            } else if (message.length === 0) {
              ulElement.innerHTML = '';
              $(ulElement).css({
                display: 'none'
              })
              $(ulIsNull).css({
                display: 'block'
              })
              $(overFindList).css({
                display: 'block'
              })
            }

          }).catch(function (error) {
            console.log(error);
          });

        } catch (error) {
          console.log(error)
        }

      }
    }

    // });
  //滚动滑轮的函数
  $(document).scroll(function () {
    var scrollH = $(document).scrollTop();
    if (scrollH >= 94.5) {
      $(".top").css({
        display: "block",
      }).on("click", function () {
        window.scrollTo(0, 0);
      });
    } else {
      $(".top").css({
        display: "none",
      });
    }
  });
});
//shOpping
$(function () {
  $(".cd_home").on("mouseout", function () {
    $(".cd_home").css({
      transition: "1s",
    });
  });
  $(".cd_one").on("mouseout", function () {
    $(".cd_one").css({
      transition: "1s",
    });
    $(".cd_img").css({
      transition: "1s",
    });
    $('.icon-qian').css({
      transition: "1s",
    })
    $('.icon-dizhi').css({
      transition: "1s",
    })
  });
});

</script>


